<template>
    <div class="creditList">
        <div class="title">征信列表</div>
        <div class="creditList-content">
            <label style="font-size: 14px;color: #475669;">关键字：</label>
            <el-input class="creditList-input-filter" placeholder="请输入姓名/身份证号/订单号" v-model="filter.text" icon="circle-cross" :on-icon-click="deleFilterText">
            </el-input>
            <label class="filterText">业务员：</label>
            <el-autocomplete class="creditList-input-selemanName inline-input" v-model="filter.salemanName" :fetch-suggestions="getSalemanNameList" placeholder="请输入姓名"></el-autocomplete>
            <!-- <label class="filterText">业务部门</label>
            <el-cascader class="creditList-input-selemanName" placeholder="请选择部门" expand-trigger="hover" :options="$store.state.opearDepart" v-model="filter.unit">
            </el-cascader> -->
            <label class="filterText">申请日期：</label>
            <el-date-picker v-model="filter.time" type="daterange" placeholder="选择申请日期">
            </el-date-picker>
            <el-button class="filter-button-search" type="primary" icon="search" @click="search">搜索</el-button>
            <p/>
            <el-button size="small" @click="expSelect()" v-show="buttonShow">批量导出</el-button>
            <el-table class="creditList-table" :data="tableData" style="width: 100%" empty-text="暂无搜索结果" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="no" label="订单编号" width="200">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="120">
                </el-table-column>
                <el-table-column prop="id" label="身份证号" width="180">
                </el-table-column>
                <el-table-column prop="dep" label="业务部门" width="120">
                </el-table-column>
                <el-table-column prop="clerk" label="业务员" width="120">
                </el-table-column>
                <el-table-column prop="time" label="申请时间" sortable min-width="180">
                </el-table-column>
                <el-table-column label="操作" width="130">
                    <template scope="scope">
                        <el-button type="text" size="small" @click="expor(tableData[scope.$index].no)">
                            导出
                        </el-button>
                        <el-button type="text" size="small">
                            <router-link :to="{path:'/creditEnter?id='+scope.row.no+'&annexBatchNo='+scope.row.annexBatchNo}">录入</router-link>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="creditList-pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="tablePage.page" :page-sizes="[10, 20, 30, 40]" :page-size="tablePage.num" layout="sizes, prev, pager, next" :total="tablePage.pager">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'creditList',
    components: {},
    data() {
        return {

            filter: {
                time: [],
                text: '',
                status: '',
                salemanName: '', //业务员名称
                salemanNameList: [
                    { value: '名称1' },
                    { value: '名称2' }
                ],
                unit: '',
            },
            tableData: [],
            multipleSelection: [],
            buttonShow: false,
            tablePage: {
                pager: 1, //总页数
                page: 1, //当前页数
                num: 10, //每页条数
            }
        }
    },
    methods: {
        handleSelectionChange(val) {
            console.log(val.length);
            this.multipleSelection = val;
            if (val.length < 2) {
                this.buttonShow = false;
            } else {
                this.buttonShow = true;
            }
        },
        expor(no) {
            const a = document.createElement('a');
            a.setAttribute('href', "/download?orderNOList=" + no);
            a.setAttribute('download', '')
            a.click();

        },
        expSelect() {
            var nos = '';
            for (var i = 0; i < this.multipleSelection.length; i++) {
                nos += ',' + this.multipleSelection[i].no;

            }

            nos = nos.substring(1);
            const a = document.createElement('a');
            a.setAttribute('href', "/download?orderNOList=" + nos);
            a.setAttribute('download', '')
            a.click();

        },
        getSalemanNameList(queryString, cb) {
            cb(this.filter.salemanNameList);
        },
        filterTag(value, row) {
            // this.status = this.filter.statusList[value];
            // return row.status === value;
            this.search();
        },
        info(index, rows) {
            console.log(rows);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.tablePage.num = val;
            this.search();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.tablePage.page = val;
            this.search();
        },
        deleFilterText() {
            this.filter.text = '';
        },
        search() {
            console.log(this.filter.salemanName);
            let param = {
                gmtStart: this.filter.time[0] ? this.$libs.formatDate(this.filter.time[0], 'yyyy-MM-dd') : '',
                gmtEnd: this.filter.time[1] ? this.$libs.formatDate(this.filter.time[1], 'yyyy-MM-dd') : '',
                pageNo: this.tablePage.page,
                pageSize: this.tablePage.num,
                statusList: 10 + '%2C' + 12,
                keyword: this.filter.text,

            };
            this.$http.get(this.$libs.getUrlSplit("/credit/list", param)).then((response) => {
                console.log(response);
                if (response.data.success) {
                    let that = this;
                    that.tableData = [];
                    that.tablePage.pager = response.data.totalCount;
                    that.tablePage.page = response.data.pageNo;
                    that.tablePage.num = response.data.pageSize;
                    $.each(response.data.data, function(index, el) {
                        that.tableData.push({
                            no: el.orderNo,
                            name: el.customerName,
                            id: el.customerIdCard,
                            dep: el.deptName,
                            clerk: el.staffName,
                            time: el.gmtCreate.substring(0, 10),
                            annexBatchNo: el.annexBatchNo
                        })
                    });
                }
            }).catch((error) => {});

        },
    },
    mounted() {
        this.search();
    }
}

</script>
<style lang="scss" scoped>
.creditList {
    padding: 10px 16px;

    .title {
        color: #99A9BF;
        font-size: 14px;
        line-height: 18px;
        margin: 8px 0px 10px 0px;
    }
    .creditList-content {
        background: #fff;
        position: fixed;
        top: 96px;
        bottom: 10px;
        left: 216px;
        right: 16px;
        overflow: auto;
        padding: 20px;
        .filterText {
            font-size: 14px;
            color: #475669;
            margin: 10px 5px 0px 10px;
        }
        .creditList-hr {
            margin: 20px 0px 30px 0px;
            background: #D3DCE6;
        }
        .creditList-input-selemanName {
            width: 100px;
            margin-bottom: 10px;
            .creditList-input-name {
                width: 90px;
            }
        }
        .creditList-input-filter {
            width: 285px;
        }
        .filter-button-search {
            margin-left: 30px;
        }
        .creditList-table {
            margin: 20px 0px;
        }
        .creditList-pagination {
            text-align: center;
        }
        a {
            color: #20a0ff;
        }
    }
}

</style>
